* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  h1 {
    text-align: center;
  }

  .gameOption {
    height: 100px;
    outline: solid 1px;
    background-color: gray;
  }

  .gameArea {
    margin-top: 10px;
    margin-bottom: 100px;
    outline: solid 1px;
    position: relative;

    .divArea {
      outline: solid 1px;
      display: block;
      position: relative;
      margin: 0 auto;

      @SelectCircleR: 40px;
      @Border: 3px;

      .box {
        //opacity: 0;
        width: @SelectCircleR;
        height: @SelectCircleR;
        position: absolute;

        border-radius: 50%;
        //outline: solid 1px red;
        margin-left: -(@SelectCircleR/2);
        margin-top: -(@SelectCircleR/2);

        transition: all 0.5s;
        border: @Border solid transparent;

        z-index: 5;


        &:hover {
          //border-color: black;
          cursor: pointer;
        }

        // 棋子
        .piece {
          position: absolute;
          @l: @SelectCircleR*0.8; // 棋子直径
          width: @l;
          height: @l;
          left: (@SelectCircleR/2) - @Border;
          top: (@SelectCircleR/2) - @Border;
          margin-left: -(@l/2);
          margin-top: -(@l/2);
          background-color: pink;
          border-radius: 50%;
          //box-shadow: #666 -2px -2px 5px inset;

        }
      }
    }

    .divEffectArea {
      outline: solid 1px red;
      margin: 0 auto;
      display: block;
      position: relative;
      filter: contrast(30);

      .effectBox {
        border-radius: 50%;
        position: absolute;
        @L: 50px;
        width: @L;
        height: @L;
        margin-left: -(@L/2);
        margin-top: -(@L/2);
        //outline: solid 5px yellow;
        filter: blur(15px);

        transition: all 0.5s;

        animation-name: lightShake;
        animation-iteration-count: infinite;
        animation-duration: 5s;
      }
    }

    .gameCanvas {
      outline: solid 1px;
      margin: 0 auto;
      display: block;
    }
  }
}
